<template>
     <div class="card bg-white p-3 mt-3 pb-3">
       <div class="card-header d-flex ai-center" :class="{'border-bottom':!plain,'pb-3':!plain}">
         <i class="sprite" :class="icon"></i>
         <div class="fs-xl flex-1 px-2"><b>{{title}}</b></div>
         <i class="sprite" v-if="!plain" ></i>
       </div>
       <div class="card-body pt-3">
           <slot></slot>
       </div>
    </div>
</template>

<script>
export default {
    props:{
    title:{ type:String , required: true},
    icon:{ type:String ,required:true },
    plain:{ type: Boolean }
  },
}
</script>

<style lang="scss">
@import '../assets/scss/variables';
.card{
     border-bottom: 1px solid $border-color;
}
</style>